<template>
  <div class="index">
    <van-tabs v-model="active">
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id"
      >
        <article-list :channel="channel"></article-list>
      </van-tab>
    </van-tabs>

    <!-- 频道列表 开关 通过定位 通过它打开频道管理的弹层 -->
    <div
      class="bar-btn"
      @click="isShowChannelEdit=true"
    >
      <van-icon name="wap-nav" />
    </div>
    <van-action-sheet
      v-model="isShowChannelEdit"
      title="频道管理"
    >
      <channel-edit
        :channels=channels
        @change-channel="hChangeChannel"
        @fixed-active-index="hFixedActiveIndex"
        :curIndex="active"
      ></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import ArticleList from './articleList.vue'
import { getChannels } from '@/api/channel.js'
import ChannelEdit from './channelEdit.vue'
export default {
  data () {
    return {
      active: 2, // tabs中的选中项的下标
      channels: [], // 频道列表
      isShowChannelEdit: false // 是否显示频道编辑弹层
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hFixedActiveIndex () {
      this.active--
    },
    hChangeChannel (curIdx) {
      this.active = curIdx
      this.isShowChannelEdit = false
    },
    // 加载频道
    async loadChannels () {
      const rs = await getChannels()
      console.log(rs)
      this.channels = rs.data.data.channels
    }
  }
}
</script>
